<template>
  <div>
    <center>
      <van-image
        v-if="user_list"
        round
        fit="cover"
        :src="user_list.avatar_url"
        width="150px"
        height="150px"
      />

      <br />

      <span @click="updName = true">{{ user_list.name }}</span
      ><br />
      <span @click="updSignature = true">{{
        user_list.signature
      }}</span
      ><br />
      <span @click="updMobile = true">{{ user_list.mobile }}</span
      ><br />
    </center>
  </div>

  <van-dialog
    title="修改用户名称"
    v-model:show="updName"
    :show-confirm-button="false"
    close-on-click-overlay
  >
    <van-form @submit="upd_userinfo">
      <van-field
        placeholder="名称"
        v-model="upd_userinfos.name"
        maxlength="20"
      />
      <van-button
        round
        block
        color="linear-gradient(to right, #ff8360, #ee0a24)"
        native-type="submit"
        class="dialog_button"
      >
        提交
      </van-button>
    </van-form>
  </van-dialog>

  <van-dialog
    title="修改用户签名"
    v-model:show="updSignature"
    :show-confirm-button="false"
    close-on-click-overlay
  >
    <van-form @submit="upd_userinfo">
      <van-field
        placeholder="签名"
        v-model="upd_userinfos.signature"
        maxlength="25"
      />
      <van-button
        round
        block
        color="linear-gradient(to right, #ff8360, #ee0a24)"
        native-type="submit"
        class="dialog_button"
      >
        提交
      </van-button>
    </van-form>
  </van-dialog>

  <van-dialog
    title="修改用户手机号"
    v-model:show="updMobile"
    :show-confirm-button="false"
    close-on-click-overlay
  >
    <van-form @submit="upd_userinfo">
      <van-field
        placeholder="手机号"
        v-model="upd_userinfos.mobile"
        maxlength="25"
      />
      <van-button
        round
        block
        color="linear-gradient(to right, #ff8360, #ee0a24)"
        native-type="submit"
        class="dialog_button"
      >
        提交
      </van-button>
    </van-form>
  </van-dialog>
</template>

<script>
export default {
  data() {
    return {
      user_list: "",
      user_id: localStorage.getItem("id"),
      upd_userinfos: {
        name: "",
        signature: "",
        mobile: "",
      },
      updName: false,
      updSignature: false,
      updMobile: false,
    };
  },
  created() {
    this.user_show();
  },
  methods: {
    user_show: function () {
      this.myaxios(this.host + "user/user/" + this.user_id + "/", "get").then(
        (data) => {
          console.log(data);
          if (data.code == 200) {
            this.$toast.success(data.msg);
            this.user_list = data.data;
          } else {
            this.$toast.fail(data.msg);
          }
        }
      );
    },
    upd_userinfo: function () {
      this.myaxios(
        this.host + "user/user/" + this.user_list.id + "/",
        "put",
        {
          name: this.upd_userinfo.name,
          signature: this.upd_userinfo.signature,
          mobile: this.upd_userinfo.mobile,
        }
      ).then((data) => {
        console.log(data);
        if (data.code == 200) {
          this.$toast.success(data.msg);
        } else {
          this.$toast.fail(data.msg);
        }
      });
    },
  },
};
</script>

<style>
</style>